<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../dist/css/main.css" type="text/css">
    <link rel="stylesheet" href="css/accordition.css" type="text/css">

</head>
<body>
<div class="container">
    <div class="col-lg-3">
        <!-- Contenedor -->
        <ul id="accordion" class="accordion">
            <!--<li>-->
                <!--<a class="link" href="#">畜禽<span class="glyphicon glyphicon-chevron-down fa"></span></a>-->
                <!--<ul class="submenu">-->
                    <!--<li><a href="#">疾病</a></li>-->
                    <!--<li><a href="#">笼舍</a></li>-->
                    <!--<li><a href="#">喂食</a></li>-->
                    <!--<li><a href="#">施药</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li>-->
                <!--<a class="link" href="#">水族<span class="glyphicon glyphicon-chevron-down fa"></span></a>-->
                <!--<ul class="submenu">-->
                    <!--<li><a href="#">水温</a></li>-->
                    <!--<li><a href="#">喂食</a></li>-->
                    <!--<li><a href="#">混养</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li>-->
                <!--<a class="link" href="#">牛病<span class="glyphicon glyphicon-chevron-down fa"></span></a>-->
                <!--<ul class="submenu">-->
                    <!--<li><a href="#">疾病</a></li>-->
                    <!--<li><a href="#">笼舍</a></li>-->
                    <!--<li><a href="#">喂食</a></li>-->
                    <!--<li><a href="#">施药</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li>-->
                <!--<a class="link" href="#">其他<span class="glyphicon glyphicon-chevron-down fa"></span></a>-->
                <!--<ul class="submenu">-->
                    <!--<li><a href="#">洗浴</a></li>-->
                    <!--<li><a href="#">被咬</a></li>-->
                    <!--<li><a href="#">量度</a></li>-->
                    <!--<li><a href="#">回收</a></li>-->
                <!--</ul>-->
            <!--</li>-->
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="../dist/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/accordition.js"></script>
<script type="text/javascript">
    $.extend({
        accordion: function (data,url) {
            var accordion = $('#accordion');
            $.each(data, function (index,info) {
                var li = $('<li></li>');
                li.html('<a class="link" href="#">'+info['cname']+'<span class="glyphicon glyphicon-chevron-down fa"></span></a>');
                var ul = $('<ul class="submenu"></ul>');
                $.each(info['child'], function (index, info) {
                    var link = $('<li></li>');
                    link.html('<a href='+url+'?cid='+info['cid']+'>'+info['cname']+'</a>');
                    ul.append(link);
                })
                li.append(ul);
                accordion.append(li);
            })

            var Accordion = function(el, multiple) {
                this.el = el || {};
                this.multiple = multiple || false;

                // Variables privadas
                var links = this.el.find('.link');
                // Evento
                links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
            }

            Accordion.prototype.dropdown = function(e) {

                var $el = e.data.el;
                $this = $(this),
                    $next = $this.next();

                $next.slideToggle();
                $this.parent().toggleClass('open');


                if (!e.data.multiple) {
                    $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
                };
            }
            accordion = new Accordion($('#accordion'), false);
        }
    })
    $(function () {
        var data = [{
            "cid":"6756757659579",
            "cname":"畜禽",
            "child":[{
                "cid":"6756757659579",
                "cname":"疾病"
            },{
                "cid":"47567647659579",
                "cname":"笼舍"
            },{
                "cid":"47567647659579",
                "cname":"喂食"
            },{
                "cid":"47567647659579",
                "cname":"施药"
            }]},
            {
            "cid":"6756757659579",
            "cname":"水族",
            "child":[{
                "cid":"6756757659579",
                "cname":"水温"
            },{
                "cid":"47567647659579",
                "cname":"喂食"
            },{
                "cid":"47567647659579",
                "cname":"混养"
            }]
        },
            {
                "cid":"6756757659579",
                "cname":"牛病",
                "child":[{
                    "cid":"6756757659579",
                    "cname":"疾病"
                },{
                    "cid":"47567647659579",
                    "cname":"笼舍"
                },{
                    "cid":"47567647659579",
                    "cname":"喂食"
                },{
                    "cid":"47567647659579",
                    "cname":"施药"
                }]
            },
            {
                "cid":"6756757659579",
                "cname":"其他",
                "child":[{
                    "cid":"6756757659579",
                    "cname":"洗浴"
                },{
                    "cid":"47567647659579",
                    "cname":"被咬"
                },{
                    "cid":"47567647659579",
                    "cname":"量度"
                },{
                    "cid":"47567647659579",
                    "cname":"回收"
                }]
            }]

        $.accordion(data,"/cate");
    })
</script>
</html>
